<template>
    <div>
<table class="table table-bordered">
    <tbody>
        <tr>
            <td>用户名</td>
            <td><input type="text" v-model="data.name" /></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" v-model="data.password" /></td>
        </tr>
        <tr>
            <td>确认密码</td>
            <td><input type="password"v-model="data.passwordsure" /></td>
        </tr>
        <tr>
            <td>请选择城市</td>
            <td><select v-model="data.citys">
                <option value="">请选择</option>
                <option :value="item.id" v-for="item in citys":key="item.id">{{item.name}}</option>
            </select></td>
        </tr>
        <tr>
            <td>请选择性别</td>
            <td><input type="radio" name="Sex" value="男" v-model="data.sex" />男
                <input type="radio" name="Sex" value="女" v-model="data.sex"/>女
                <input type="radio" name="Sex" value="沃尔玛购物袋"v-model="data.sex" />沃尔玛购物袋
            </td>
        </tr>
        <tr>
            <td>请选择职业</td>
            <td><input type="radio" name="Work" value="学生" v-model="data.work" />学生
                <input type="radio" name="Work" value="教师" v-model="data.work" />教师
                <input type="radio" name="Work" value="其他" v-model="data.work" />其他
            </td>
        </tr>
        <tr>
            <td>请选择爱好</td>
            <td><input type="checkbox" name="hobby" value="打篮球"v-model="data.hobby" />打篮球
                <input type="checkbox" name="hobby" value="跑步"v-model="data.hobby"/>跑步
                <input type="checkbox" name="hobby" value="阅读"v-model="data.hobby"/>阅读
                <input type="checkbox" name="hobby" value="上网"v-model="data.hobby"/>上网
            </td>
        </tr>
        <tr>
            <td>备注</td>
            <td><textarea placeholder="这里是备注内容" rows="5" cols="50" v-model="data.info"></textarea></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="button" value="提交" @click="add" class="btn btn-primary" /></td>
        </tr>
    </tbody>
</table>
    </div>
</template>

<script setup lang="ts">
import{ref,reactive}from 'vue'

let citys = ref([
  {id:1,name:'北京市'},
  {id:2,name:'天津市'},
  {id:3,name:'上海市'},
  {id:4,name:'河北省'},
  {id:5,name:'山西省'},
  {id:6,name:'山东省'}
])
let data=reactive({
name:'',
password:'',
passwordsure:'',
citys:'',
sex:'男',
work:'教师',
hobby:[],
info:''
})

let add=()=>{
    console.log(data);
}

</script>

<style scoped>

</style>